import React from 'react'
import Home from './pages/Home'
import About from './pages/About'
// Route是真实配置前端路由的组件
// Routes只是用来包裹Route的
// Link组件在页面上最终渲染的是一个a标签,用户可以点击,点击之后就修改路径但不发送请求
import { Routes, Route, Link, NavLink } from 'react-router-dom'
export default function App() {
  return (
    <div>
      App
      <hr />
      <h1>react-router-dom</h1>
      {/* Link必须写to属性，to属性的值，就是目标路径。 注意：Link组件子节点位置必须写描述文本，不写的话，在页面上就看不见 */}
      {/* NavLink和Link的使用以及作用是相同的,只是会给选中的导航按钮,自动添加active类型,从而快速实现高亮 */}
      {/* <NavLink to="/home">首页</NavLink> &nbsp; &nbsp;
      <NavLink to="/about">关于页</NavLink> */}
      {/* 自定义类名 */}
      {/* <NavLink
        to="/home"
        className={({ isActive }) => {
          // isAcitve的值布尔值,如果当前路径是/home,则isActive为true,否则是false
          // 这个函数的返回值,会赋值给className
          return isActive ? 'xxx' : ''
        }}
      >
        首页
      </NavLink>
      &nbsp; &nbsp;
      <NavLink
        to="/about"
        className={({ isActive }) => {
          // console.log('关于页', obj)
          return isActive ? 'xxx' : ''
        }}
      >
        关于页
      </NavLink> */}
      <NavLink
        to="/home"
        style={({ isActive }) => {
          // 函数的返回值会赋值给style属性
          return isActive ? { color: 'green', fontSize: 30 } : {}
        }}
      >
        首页
      </NavLink>
      &nbsp; &nbsp;
      <NavLink
        to="/about"
        style={({ isActive }) => {
          // 函数的返回值会赋值给style属性
          return isActive ? { color: 'green', fontSize: 30 } : {}
        }}
      >
        关于页
      </NavLink>
      <hr />
      {/* 前端路由规则所对应的组件想要渲染到哪里,则配置Route的代码就写在哪里 */}
      <Routes>
        <Route path="/home" element={<Home></Home>}></Route>
        <Route path="/about" element={<About></About>}></Route>
      </Routes>
      <hr />
    </div>
  )
}
